<template>
    <div>
        <div>
            <div class="crumbs">
       
                <div style="margin:10px;font-family: 'MicrosoftYaHei-Bold', '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
                font-weight: 700;
                font-style: normal;
                font-size: 14px;
                line-height: 22px;">批量理赔</div>
            </div>
            <!-- 批量导入 -->
            <!-- <div class="container">
                <template>
                    <el-tabs v-model="activeName" @tab-click="importInfo">
                        <el-tab-pane label="批量导入" name="first"  v-show='!isImport'>
                            <el-card class="box-card" style="margin-top: 2px;" id="jiesuanxinxi">
                                <div>
                                    <template>
                                        <el-form ref="form" :model="form" label-width="95px">
                                            <el-row type="flex">
                                                <el-col :span="5" >
                                                    <el-form-item label="批次号">
                                                          <el-input  placeholder="请输入保单号" style="width: 100%"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="5" :offset="1">
                                                     <el-button type="primary" size="medium" style=" border-color:rgba(255, 138, 0, 1);
                                                     background-color: rgba(255, 138, 0, 1);">导出成功案件</el-button>
                                                </el-col>
                                                <el-col :span="5" :offset="1">
                                                     <el-button type="primary" size="medium" style=" border-color:rgba(255, 138, 0, 1);
                                                     background-color: rgba(255, 138, 0, 1);">导出错误案件</el-button>
                                                </el-col>  
                                                <el-col :span="4" style="text-align: center">
                                                    <el-form-item size="big">
                                                        <el-button type="primary" @click="handleSearch">导出成功案件</el-button>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="4" style="text-align: center">
                                                    <el-form-item size="big">
                                                        <el-button type="primary" @click="handleReset">导出错误案件</el-button>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                        </el-form>
                                    </template>
                                </div>
                    
            
                               <div class="container" style="width: 91.5%;margin-top: 30px;">
                                    <template>
                                        <div>
                                            文件信息：
                                            <template>
                                                <el-button type="text"  @click="exportMaintainExcel">导出模板</el-button>&nbsp;&nbsp;&nbsp;
                                                <el-input type="file"
                                                        style="width: 210px;height: 100px;"
                                                        ref="fileToUpload"
                                                        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"  
                                                        name="file" 
                                                        id="enterexportExpert"
                                                ></el-input>
                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button type="text"  @click="enterexportExpert">导入数据</el-button>
                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red">注：上传文件大小最大为20M</span>
                                            </template>
                                        </div>
                                    </template>
                                </div> 
                            </el-card>
                        </el-tab-pane>    
                    </el-tabs>
                </template>
            </div> -->
            <div class="container">

                <template>
                    <el-form ref="form" :model="form" label-width="95px">
                        <el-row type="flex">
                            <el-col :span="5" >
                                <el-form-item label="批次号：">
                                        <el-input  placeholder="请输入批次号" style="width: 100%"></el-input>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="5" :offset="1">
                                    <el-button type="primary" size="medium" style=" border-color:rgba(255, 138, 0, 1);
                                    background-color: rgba(255, 138, 0, 1);">导出成功案件</el-button>
                            </el-col>
                            <el-col :span="5" :offset="1">
                                    <el-button type="primary" size="medium" style=" border-color:rgba(255, 138, 0, 1);
                                    background-color: rgba(255, 138, 0, 1);">导出错误案件</el-button>
                            </el-col>  -->
                            <el-col :span="5" style="text-align: center">
                                <el-form-item size="big">
                                    <el-button type="primary" @click="handleSearch">导出成功案件</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5" style="text-align: center">
                                <el-form-item size="big">
                                    <el-button type="primary" @click="handleReset">导出错误案件</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </template>
                 <template>
                    <div>
                        <el-divider></el-divider>
                    </div>
                </template>
                 <template>
                    <div class="container">
                        文件信息：
                        <template>
                            <el-button type="text"  @click="exportMaintainExcel">导出模板</el-button>&nbsp;&nbsp;&nbsp;
                            <el-input type="file"
                                    style="width: 210px;height: 20px;"
                                    ref="fileToUpload"
                                    accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"  
                                    name="file" 
                                    id="enterexportExpert"
                            ></el-input>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button type="text"  @click="enterexportExpert">导入数据</el-button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red">注：上传文件大小最大为20M</span>
                        </template>
                    </div>
                </template>
                <template>
                    <div>
                        <el-divider></el-divider>
                    </div>
                </template>
            <!-- <div class="container">
                <template>
                    <div>
                        文件信息：
                        <template>
                            <el-button type="text"  @click="exportMaintainExcel">导出模板</el-button>&nbsp;&nbsp;&nbsp;
                            <el-input type="file"
                                    style="width: 210px;height: 40px;"
                                    ref="fileToUpload"
                                    accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"  
                                    name="file" 
                                    id="enterexportExpert"
                            ></el-input>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button type="text"  @click="enterexportExpert">导入数据</el-button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red">注：上传文件大小最大为20M</span>
                        </template>
                    </div>
                </template>
            </div> -->
            <!-- 结果列表 -->
            <!-- <div class="container">
                <template> -->
                    <!-- <el-tabs v-model="activeName" @tab-click="resultInfo"> -->
                        <!-- <el-tab-pane label="结果列表" name="first"  v-show='!isResult'> -->
                <el-table
                    :data="tableData"
                    class="table"
                    ref="multipleTable"
                    @selection-change="handleSelectionChange"
                    header-cell-class-name="table-header"
                    style="margin-top: 30px"
                >
                    <el-table-column prop="policyNo" label="保单号" width="240px" align="center"></el-table-column>
                    <el-table-column prop="name2" label="险种" width="180px" align="center"></el-table-column>
                    <el-table-column prop="zhuangt" label="承保机构" width="280px" align="center"></el-table-column>
                    <el-table-column prop="data4" label="投保人" width="200px"  align="center"></el-table-column>
                    <el-table-column prop="data1" label="被保险人"   align="center"></el-table-column>
                    <el-table-column prop="data2" label="证件号" align="center"></el-table-column>
                    <el-table-column prop="zhifuriqi" label="起保日期"  align="center"></el-table-column>
                    <el-table-column prop="data3" label="终保日期"  align="center"></el-table-column>
                </el-table>
                <div class="pagination">
                    <div v-show=" pagination.totalPage>0" class="index_page">
                        <el-pagination :current-page="pagination.currentPage" :page-size="pagination.rowsNumber"
                                        :page-sizes="[10, 25, 50, 100]"
                                        :total="pagination.totalPage" background layout="prev, pager, next,sizes,total,jumper"
                                        @size-change="handleSizeChange" @current-change="queryFun">
                        </el-pagination>
                    </div>
                </div>
                        <!-- </el-tab-pane>     -->
                    <!-- </el-tabs> -->
                <!-- </template> -->
                <!-- 编辑弹出框 -->
                <!-- <el-dialog
                        title="批量理赔导入"
                        :visible.sync="editdiagnosisDetails"
                        width="75%"
                        center>
                    <div>
                        <template>
                            <el-form ref="form" :model="form" label-width="92px">
                                <el-row type="flex">
                                    <el-col :span="5" >
                                        <el-form-item label="所属机构">
                                            <el-select  placeholder="请选择">
                                               
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="5" :offset="1">
                                        <el-form-item label="所属中支">
                                            <el-select  placeholder="请选择">
                                               
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="5" :offset="1">
                                        <el-form-item label="所属分公司">
                                            <el-select  placeholder="请选择">
                                                
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="5" :offset="1">
                                        <el-form-item label="医保中心">
                                            <el-select  placeholder="请选择">
                                                
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </template>
                    </div>
                    
                    <div class="container" style="width: 91.5%">
                        <template>
                            <div>
                                文件信息：
                                <template>
                                    <el-button type="text"  @click="exportMaintainExcel">导出模板</el-button>&nbsp;&nbsp;&nbsp;
                                    <el-input type="file"
                                            style="width: 195px"
                                            ref="fileToUpload"
                                            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"  
                                            name="file" 
                                            id="enterexportExpert"
                                    ></el-input>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button type="text"  @click="enterexportExpert">导入数据</el-button>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red">注：上传文件大小最大为20M</span>
                                </template>
                            </div>
                        </template>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="info" @click="editdiagnosisDetails = false">关  闭</el-button>
                    </div>
                </el-dialog> -->
            <!-- </div> -->
            </div>
        </div>
    </div>
</template>

<script>
    import{exportBatchClaimTemplate,importCaseInfo,queryBatchCase,exporttBatchClaim}from '@/api/baseDate';
    export default {
        name: 'caseBatchClaim',
        data() {
            return {
                pagination: {
                    currentPage: 1, // 当前页
                    rowsNumber: 10, // 每页条数
                    totalPage: 10 // 总条数
                },
                redore: true,
                guanzhus: null,
                centerDialogVisible:false,
                editdiagnosisDetails:false,
                isImport:false,
                isResult:false,
                query: {
                    address: '',
                    name: '',
                    pageIndex: 1,
                    pageSize: 10
                },
                tableData: [
                    {
                        policyNo:'203060101012019500002',
                        data1:'李刚',
                        data2:'45641122788989',
                        flag:'是',
                        data3:'2021-4-2',
                        fangshi:'45641122788979',
                        name2:'节假日旅游保险',
                        data4: "江苏省徐州市医保局",
                        zhuangt:"城堡医疗",
                        zhifufangshi:"转账",
                        zhifuduixiang:"张全",
                        zhifujiafang:"全运公司",
                        zhifuriqi:"2020-09-12"
                    }
                ],
                multipleSelection: [],
                delList: [],
                editVisible: false,
                pageTotal: 3,
                form: {},
                idx: -1,
                id: -1,
                formInline: {
                    user: '',
                    region: ''
                }
            };
        },
        created() {
            this.getData();
        },
        methods: {
            importInfo(){
                this.isImport=!this.isImport;
            },
            resultInfo(){
                this.isResult=!this.isResult;
            },
            // 导出
            exportMaintainExcel(){
                // let fileName = '数据导入模板.xls';
                // let link = document.createElement('a');
                // link.style.display = 'none';
                // link.href ='';
                // // link.href =request.prototype.constructor.defaults.baseURL.toString() + '';
                // link.setAttribute('download', fileName);
                // document.body.appendChild(link);
                // link.click();
                // document.body.removeChild(link);
                this.$message.success('导出成功');
            },
            // 导入
            enterexportExpert () {
                this.$message.success('导入成功');
            },
            handleSearch() {
     
            },
            // 删除操作
            handleDelete(index, row) {
                // 二次确认删除
                /* this.$confirm('确定要删除吗？', '提示', {
                     type: 'warning'
                 })
                     .then(() => {
                         this.$message.success('删除成功');
                         this.tableData.splice(index, 1);
                     })
                     .catch(() => {});*/

            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            delAllSelection() {
                const length = this.multipleSelection.length;
                let str = '';
                this.delList = this.delList.concat(this.multipleSelection);
                for (let i = 0; i < length; i++) {
                    str += this.multipleSelection[i].name + ' ';
                }
                this.$message.error(`删除了${str}`);
                this.multipleSelection = [];
            },
            // 编辑操作
            handleEdit(index, row) {
                this.idx = index;
                this.form = row;
                this.editVisible = true;
            },
            // 保存编辑
            saveEdit() {
                this.editVisible = false;
                this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                this.$set(this.tableData, this.idx, this.form);
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageIndex', val);
                this.getData();
            },
            onSubmit() {
                console.log('submit!');
            }
        }
    };
</script>

<style lang="scss" scoped>
     /deep/.el-input__inner{
        height: 30px;    
        line-height: 23px;    
    }
    .el-card{
        height: 200px;
    }
</style>
<style>
    .el-row {
    height: 40px;
  }
    .el-table .cell{
    line-height: 10px;
    font-size: 11px;
    font-weight: 800;
  }
   
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    .table {
      width: 100%;
      font-size: 14px;
  }
  .red {
      color: #ff0000;
  }
  .mr10 {
      margin-right: 10px;
  }
  .table-td-thumb {
      display: block;
      margin: auto;
      width: 40px;
      height: 40px;
  }
  .el-button--warning {
    color: #fff;
    background-color: #e6a23c;
    border-color: #e6a23c;
}
  .el-button--primary{

    border-color:rgba(255, 138, 0, 1);
    background-color: rgba(255, 138, 0, 1);
  }
  .el-button--success{
    border-color:rgba(255, 138, 0, 1);
    background-color: rgba(255, 138, 0, 1);
  }
  .el-table .cell{
    line-height: 10px;
    font-size: 11px;
    font-weight: 800;
  }
  .el-table th, .el-table tr {
    background-color:rgba(249, 249, 249, 1);
  }
  .el-form{

    width: 100%;
  }
  .el-collapse-item:last-child{
    margin-bottom: 15px;
}
  .el-row {
    height: 40px;
  }
  .item_a{
    margin-left: 40px;
  }
  .el-form-item__content{
      height: 28px;
      width: 150px;
  }
  
  .el-form-item__label{
    font-size: 12px;
    color: #333333;
    font-weight: 400;
  }
  .el-col {
    border-radius: 4px;
  }
</style>